<template>
  <div class="gc-sidebar-wrap">
    <el-menu :default-active="$route.path" class="gc-sidebar" router mode="vertical" @open="handleOpen"
             @close="handleClose" :collapse="isCollapse">
      <template v-for="item in Routers">
        <el-menu-item :key="item.path+'/'+item.children[0].path"
                      v-if="!item.hidden && item.noDropdown && item.children.length > 0"
                      :index="item.path+'/'+item.children[0].path">
          <i v-if='item.icon' class="icon" :class="item.icon"></i>
          <span slot="title">{{item.children[0].name}}</span>
        </el-menu-item>

        <el-submenu :index="item.path" v-if="!item.noDropdown && !item.hidden">
          <template slot="title">
            <i v-if='item.icon' class="icon" :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :key="item.path+'/'+child.path" v-for="child in item.children" v-if='!child.hidden'
                          :index="item.path+'/'+child.path">{{child.name}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </template>
    </el-menu>
  </div>
</template>

<script>
  import {Routers} from '@/router/index';

  export default {
    name: 'ymySidebar',
    data() {
      return {
        Routers,
        isCollapse: false
      }
    },
    methods: {
      handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      }
    }
  }
</script>

<style lang="scss">
  @import '../style/config.scss';

  .gc-sidebar-button {
    position: fixed;
    top: 50%;
    left: $sidebar-width;
    z-index: 99;
    width: 14px;
    height: 48px;
    background-color: red;
    overflow: hidden;
    span {
      display: block;
      width: 100%;
      height: 48px !important;
      opacity: 0;
    }
  }

  .gc-sidebar-wrap {
    position: fixed !important;
    top: $top-bar-height;
    width: $sidebar-width;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }

  .gc-sidebar {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #f6f9fa !important;
    .el-submenu__title,
    > .el-menu-item {
      padding: 11px 16px;
      padding-left: 22px !important;
      height: 40px;
      line-height: 18px;
      font-size: $base-font-size;
      i.icon {
        color: $base-color;
        margin-right: 15px !important;
      }
    }
    .el-menu-item-group__title {
      display: none;
    }
    .el-menu-item {
      &:hover {
        background-color: transparent;
      }
    }
    a {
      display: block;
    }
    .el-menu-item-group {
      .el-menu-item {
        padding: 11px 16px;
        padding-left: 61px !important;
        height: 40px;
        line-height: 18px;
        font-size: $base-font-size;
        &.is-active {
          background-color: $base-color;
          color: #fff;
          li {
            color: #fff;
          }
        }
        &:hover {
          background-color: $base-color !important;
          color: #fff;
        }
      }
    }
    .el-submenu__icon-arrow {
      top: 23px;
      right: 6px !important;
      color: $font-color-9 !important;
      transform: scale(0.6);
      -webkit-transform: scale(0.6);
    }
    .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
      transform: scale(0.6) rotateZ(180deg);
      -webkit-transform: scale(0.6) rotateZ(180deg);
    }
    .el-menu {
      background-color: #fff;
    }
  }

  .el-submenu [class^=el-icon-] {
    color: $base-color;
  }

  .el-submenu [class^=el-icon-] {
    margin-right: 20px;
  }
</style>
